<template>
    <div id="main"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
//@ts-ignore
import { onMounted } from 'vue';

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    var data = [];
    for (let i = 0; i < 8; ++i) {
        data.push(Math.round(Math.random() * 200));
    }

    const option = {
        title: {
            text: "技术搜索量"
        },
        xAxis: {
            max: 'dataMax'
        },
        yAxis: {
            type: 'category',
            data: ['Java', 'Python', 'C/C++', 'Vue.js', 'JavaScript', "HTML", "JQuery.js", "Less"],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 7// only the largest 3 bars will be displayed
        },
        series: [
            {
                realtimeSort: true,
                name: 'X',
                type: 'bar',
                data: data,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#1ACFFE' // 0% 处的颜色
                    },
                    {
                        offset: 0.5, color: '#7686fa' // 100% 处的颜色
                    }, {
                        offset: 1, color: '#c278ed' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            }
        ],
        legend: {
            show: true
        },
        animationDuration: 3000,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };

    function update() {
        var data = option.series[0].data;
        for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
                data[i] += Math.round(Math.random() * 2000);
            } else {
                data[i] += Math.round(Math.random() * 200);
            }
        }
        myChart.setOption(option);
    }

    setInterval(function () {
        update();
    }, 100);
})
</script>

<style>
#main {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
</style>